<template>
  <div>
    <!-- 详情页头部 -->
    <div class="head">
      <div class="head-left" @click="$router.go(-1)">
        <van-icon name="arrow-left" size="22" />
      </div>
      <div class="logo">
        <img src="https://m.hua.com/content/vue/login/static/img/m_hualogo.png" alt />
      </div>
      <div class="head-right">
        <!-- 气包弹出框 -->
        <van-popover
          placement="bottom-end"
          v-model="showPopover"
          trigger="click"
          :actions="actions"
           @select="onSelect"
        >
          <template #reference>
            <van-icon name="apps-o" size="24" />
          </template>
        </van-popover>
      </div>
    </div>
    <div class="warp">
      <!-- 详情轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="banner in pics " :key="banner.id">
          <img :src="banner.pic" alt />
        </van-swipe-item>
      </van-swipe>
      <!-- 商品名称 -->
      <div class="title">
        <h3>{{ basicInfo.name }}</h3>
      </div>
      <!-- 分割线 -->
      <van-divider :style="{ color: '#FF734C', borderColor: '#FF734C', padding: '0 16px' }">商品详情</van-divider>
      <!-- 商品详情信息 -->
      <div class="detal" v-html="content">{{ content }}</div>
    </div>
    <!-- 点击购买或者添加的弹出层 -->
    <van-popup v-model="show"  position="bottom"
    closeable
    round
    :style="{ height: '40%' }" >
      <div class="warp-sku">
        <!-- 商品卡片 就是添加商品的基本信息 -->
          <van-card
            :num="sku.number"
            :price="sku.minPrice"
            :title="sku.name"
            :thumb="sku.pic"
            :desc="sku.characteristic ? sku.characteristic: '暂无描述'"
          >
            <template #footer>
                <van-stepper v-model="sku.number" theme="round" button-size="20" disable-input />
                <van-button color="red" round  type="primary" @click="commitItem" size="large">确认</van-button>
            </template>
          </van-card>
      </div>
    </van-popup>
    <!-- 底部 -->
    <van-goods-action>
      <van-goods-action-icon icon="wap-home-o"  @click="$router.push('/home')" text="首页" />
      <van-goods-action-icon icon="cart-o" @click="$router.push('/cart')" text="购物车" :badge="$store.state.cart.items.length||''" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="warning" @click="showSku(1)" text="加入购物车" />
      <van-goods-action-button type="danger"  @click="showSku(0)" text="立即购买" />
    </van-goods-action>
  </div>
</template>

<script>
import { fetchItemDetail, addCart } from '@api'
import { Toast } from 'vant'
export default {
  components: {},
  data () {
    return {
      show: false, // 控制弹出层的状态
      actions: [
        { text: '首页', icon: 'wap-home-o', path: '/' },
        { text: '分类', icon: 'apps-o', path: '/cate' },
        { text: '购物车', icon: 'shopping-cart-o', path: '/cart' },
        { text: '我的', icon: 'smile-o', path: '/user' }
      ],
      basicInfo: {}, // 商品的基本信息
      pics: [], // 商品的轮播图
      content: '', // 商品的详情
      showPopover: false, // 控制弹出框的显示
      sku: { // 加入购物车（提交商品的规格）
        number: 1 // 购买数量
      },
      actionType: 1 // 1代表添加到购物车 0 代表直接提交订单
    }
  },
  created () {
    this.ItemDetail()
  },
  methods: {
    // 这里是点击确认按钮去的执行的 有两种 先判断是添加购物车还是立即购买
    commitItem () {
      if (this.actionType) {
        // 这里是点击添加到购物车
        addCart({
          goodsId: this.$route.params.id,
          number: this.sku.number,
          token: localStorage.getItem('token')
        }).then(res => {
          if (res.data.code === 0) {
            // 添加成功之后从新给state里赋值然后给出提示然后关闭弹出框
            this.$store.commit('cart/init_cart_info', {
              items: res.data.data.items,
              todal: res.data.data.price
            })
            Toast({
              message: '添加成功 快去看看吧！',
              type: 'success',
              duration: 1000
            })
          }
        })
      } else {
        // 这里是点击立即购买执行的
      }
      this.show = false
    },
    showSku (type) {
      // 控制sku的弹出
      this.show = true
      // 将点击购物车或者立即购买传过来的值 赋值给actionType 来做判断
      this.actionType = type
    },
    onSelect (action) {
      this.$router.push(action.path)
    },
    // 请求商品信息
    ItemDetail () {
      fetchItemDetail(this.$route.params.id).then((res) => {
        if (res.data.code === 0) {
          // 请求成功后赋值
          this.basicInfo = res.data.data.basicInfo
          this.pics = res.data.data.pics
          this.content = res.data.data.content
          this.sku = {
            ...this.sku,
            ...res.data.data.basicInfo
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.head {
  position: fixed;
  top: 0;
  left: 0;
  height: 44px;
  display: flex;
  padding: 0 24px 0 12px;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
  width: 100%;
  background-color: #f3f5f7;
  img {
    width: 150px;
    height: 20px;
  }
  .icon {
    font-size: 22px;
  }
}
.warp {
  padding-top: 44px;
  padding-bottom: 50px;
  .my-swipe {
    img {
      width: 100%;
    }
  }
  .title {
    margin-top: 20px;
    margin-left: 20px;
    font-size: 24px;
    font-weight: 900;
  }
  .detal {
    /deep/ img {
      display: block;
      width: 100%;
    }
  }
}
.warp-sku{
  padding: 15px;
  box-sizing: border-box;
  background-color: #fafafa;
  height: 100%;
  .van-stepper{
    margin: 10px 0 30px 0;
  }
  .van-card__title{
      font-size: 16px;
      font-weight: 600;
      margin-bottom: 10px;
    }
}
</style>
